* {
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    margin: 0 auto;
    font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
    height: 2000px;
}
// 顶部制作
.suspension{
    // position: fixed;
}
.m-navbar{
    width: 100vw;
    height: 10.6667vw;
    display: flex;
    justify-content: space-between;
   align-items: center;
   padding: 0 3.2vw 0 4.8vw;
   .logo i{
       color: #fb7299;
       font-size: 7.46667vw;
   }
   .right{
       display: flex;
       a{
           display: block;
       }
        .search{
            width: 5.8667vw;
           height: 5.8667vw;
           color: gray;
           margin-right: 5.8667vw;
        //    margin-top: 0.5333vw;
           i{
            font-size: 5.86667vw;
           }
        }
        .user{
            width: 6.4vw;
            height: 6.4vw;
            margin-right: 3.2vw;
            img{
                width: 6.4vw;
                height: 6.4vw;
                border-radius: 3.2vw;
            }
        }
        .download{
            width: 19.2vw;
            height: 6.4vw;
            margin-left: 2.1333vw;
            img{
                width: 19.2vw;
                height: 6.4vw;
            }
        }
   }
}
.user_info{
    background-color: white;
    .banner{
        width: 99.2vw;
        height: 24vw;
        background: url(../images/bj.png) no-repeat;
        overflow: hidden;
        // 把图像扩展足够大
        background-size: cover;
        // 属性设置背景图像起始位置
        background-position: 50%;
    }
}
.part1{
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 0 2.6667vw;
    .face{
        width: 22.4vw;
        height: 22.4vw;
        img{
            margin-top: -2.1333vw;
            width: 100%;
            height: 100%;
            border-radius: 10.6667vw;
        }
    }
    .relation{
        width: 58.6667vw;
        height: 21.8667vw;
        .count{
            padding: 2.1333vw 0 0;
            width: 58.6667vw;
            height: 8.5333vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .split{
                width: 0.2667vw;
                height: 4.2667vw;
                border-right: 1px solid gray;
            }
            a{
                display:inline-block;
                flex: 1;
                text-align: center;
                .num{
                    font-size: 3.73333vw;
                    line-height: 4.26667vw;
                    color: black;
                }
                .type{
                    font-size: 2.93333vw;
                    color: #999;
                }
            }
        }
        .flow_btn{
            width: 58.6667vw;
            height: 8vw;
            border-radius: 1.8667vw;
            background-color: white;
            border: 1px solid #fb7299;
            font-size: 3.73333vw;
            color: #fb7299;
            text-align: center;
            line-height: 8vw;
            margin-top: 4.8vw;
        }
    }
}
.part2{
    padding: 0 3.2vw;
    width: 100vw;
    height: 20vw;
    .base{
        width: 93.6vw;
        height: 6.9333vw;
        .name{
            font-size: 4.8vw;
            color: black;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 62.66667vw;
            display: inline-block;
            vertical-align: middle;
        }
        .gender{
            margin-left: 1.06667vw;
            display: inline-block;
            vertical-align: middle;
            padding-top: 0.53333vw;
        }
        .level{
            margin-left: 1.6vw;
            vertical-align: middle;
            i{
                font-size: 5.8667vw;
                vertical-align: middle;
            }
        }
        }
    .desc{
        clear: both;
        .content{
            margin-top: 2.13333vw;
            font-size: 3.46667vw;
            color: #999;
            line-height: 4.53333vw;
            width: 83.46667vw;
            height: 4.53333vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            float: left;
        }
        .more{
            margin-top: 1.86667vw;
            float: right;
            font-size: 3.46667vw;
            color: #1389bf;
        }
    }
}
// 动态导航
.tab{
    padding: 0 2.6667vw;
    width: 100vw;
    height: 10.6667vw;
    line-height: 10.6667vw; 
    margin-top: -4vw;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    span{
        width: 6.9333vw;
        height: 10.6667vw;
        margin: 0 8.5333vw 0 0;
        color: #757575;
        font-size: 3.46667vw;
    }
    .on{
        color: #fb7299;
    }
}
// 视频列表
.list{
    width: 100vw;
    padding-left: 2.6667vw;
    .video_items{
        display: block;
        position: relative;
        width: 96.8vw;
        height: 24.2667vw;
        border-bottom: 1px solid #e7e7e7;
        padding: 2.4vw 3.2vw 2.4vw 0;
        .v1{
            float: left;
            width: 31.2vw;
            height: 19.4667vw;
            border-radius: 2.6667vw;
        }
        .time{
            position: absolute;
            right: 66.4vw;
            bottom: 2.6667vw;
            width: 9.3333vw;
            height: 4.2667vw;
            font-size: 3.2vw;
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
        }
        .info{
            position: relative;
            width: 58.9333vw;
            height: 19.4667vw;
            margin-left: 31.2vw;
            .title{
                padding-left: 4vw;
                margin: 0;
                width: 59.2vw;
                height: 4.5333vw;
                font-size: 3.73333vw;
                color: black;
                font-weight: 400;
                line-height: 4.5333vw;
                max-height: 9.06667vw;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .state{
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                width: 59.2vw;
                height: 4.5333vw;
                line-height: 4.5333vw;
                font-size: 2.66667vw;
                color: #999;
                padding-left: 4vw;
                .view{
                    i{
                        margin-right: 1.06667vw;
                        vertical-align: middle;
                    }
                    .iconfont{
                        font-family: iconfont!important;
                        font-size: 4.26667vw;
                        font-style: normal;
                        -webkit-font-smoothing: antialiased;
                    }
                    span{
                        vertical-align: middle;
                    }
                }
                .pinglun{
                    margin-left: 7.73333vw;
                    i{
                        vertical-align: middle;
                    }
                    .iconfont{
                        font-family: iconfont!important;
                        font-size: 4.26667vw;
                        font-style: normal;
                        -webkit-font-smoothing: antialiased;
                    }
                    span{
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}